<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
//@ts-ignore
import Header from '../components/Header.vue';
//@ts-ignore
import Footer from '../components/Footer.vue';

const route = useRoute();
const router = useRouter();
const destinationId = ref(parseInt(route.params.id as string));
const destination = ref<any>(null);
const loading = ref(true);
const error = ref(false);

// 目的地数据 (实际项目中应从API获取)
const destinations = [
  { 
    id: 1, 
    name: '巴黎', 
    description: '浪漫之都，艺术与美食的天堂', 
    fullDescription: '巴黎是法国的首都，也是欧洲最著名的旅游城市之一。这座城市以其丰富的艺术历史、精致的美食和浪漫的氛围而闻名于世。巴黎拥有世界上一些最著名的地标，如埃菲尔铁塔、卢浮宫和巴黎圣母院。漫步在塞纳河畔，您可以感受到这座城市独特的魅力。',
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.483d7a1f4518b81e410acd0ee269573b?rik=sADj5uCEh7piZQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20103%2f560%2fw1080h1080%2f20190427%2ff8aa-hvvuiyp2070947.jpg&ehk=OQe10sDGIDAlUXp8mcA2L%2fqVmtZo%2fvSkq3Sd7jf3RBU%3d&risl=&pid=ImgRaw&r=0',
    price: '¥ 8,999',
    rating: 4.8,
    region: 2, // 欧洲
    regionName: '欧洲',
    themes: [2, 4], // 古城文化, 美食之旅
    themeNames: ['古城文化', '美食之旅'],
    activities: ['埃菲尔铁塔', '卢浮宫', '凯旋门', '塞纳河游船', '巴黎圣母院'],
    attractions: [
      {
        name: '埃菲尔铁塔',
        description: '埃菲尔铁塔是巴黎的标志性建筑，于1889年建成。它高324米，是巴黎最高的建筑物。游客可以登上铁塔顶部，欣赏巴黎全景。',
        image: 'https://ts1.tc.mm.bing.net/th/id/R-C.f7e3a3d2a5401bb4f3075678a0224457?rik=tWiRe9sXV%2fWn9Q&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20170906%2fdd2403e0abc64cca8f00820bfa8b4f31.jpeg&ehk=05wAaWfOoufdGuyHugRf6xLcw9CujtfNNcdicv%2bgEjE%3d&risl=&pid=ImgRaw&r=0'
      },
      {
        name: '卢浮宫',
        description: '卢浮宫是世界上最大的艺术博物馆之一，收藏了约38,000件从史前到21世纪的展品。其中最著名的作品包括达·芬奇的《蒙娜丽莎》和《米洛的维纳斯》雕像。',
        image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.DIYNPKxrjwFLyawTWgFPSwHaEK?rs=1&pid=ImgDetMain'
      },
      {
        name: '凯旋门',
        description: '凯旋门是拿破仑为纪念法国军队的胜利而建造的，高50米。游客可以登上凯旋门顶部，欣赏香榭丽舍大街的美丽景色。',
        image: 'https://ts1.tc.mm.bing.net/th/id/R-C.7f2ece2e4decf7e125c6f55b623ded66?rik=6n9BiwG%2b9jBEDQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20140618%2f20140618165646-443540589.jpg&ehk=dgLmnjNv2RkA1XsB1YYIATopSBldqWJn%2frAAJmi8BBA%3d&risl=&pid=ImgRaw&r=0'
      },
      {
        name: '塞纳河',
        description: '塞纳河流经巴黎市中心，是巴黎的象征之一。游客可以乘坐游船，欣赏沿岸的美丽风光，包括巴黎圣母院、卢浮宫等著名景点。',
        image: 'https://img95.699pic.com/photo/30426/1130.jpg_wh860.jpg'
      },
      {
        name: '巴黎圣母院',
        description: '巴黎圣母院是法国最著名的哥特式建筑之一，建于12至14世纪。虽然2019年的大火造成了严重损坏，但修复工作正在进行中。',
        image: 'https://img95.699pic.com/photo/50095/4647.jpg_wh860.jpg'
      }
    ],
    bestTimeToVisit: '4月至6月或9月至10月',
    travelTips: [
      '提前购买热门景点门票可以节省排队时间',
      '巴黎地铁是游览城市的最佳交通工具',
      '大部分博物馆周一闭馆，请提前规划行程',
      '法国人注重礼节，尝试用简单的法语打招呼会获得更好的体验'
    ]
  },
  { 
    id: 2, 
    name: '圣托里尼', 
    description: '爱琴海上的蓝白小岛', 
    fullDescription: '圣托里尼是希腊爱琴海上的一个岛屿，以其壮观的悬崖、白色的建筑和蓝色的屋顶而闻名。这里被认为是世界上最浪漫的度假胜地之一。岛上的伊亚镇以其美丽的日落而闻名，每天吸引着数以千计的游客。圣托里尼还拥有独特的黑沙滩和红沙滩，以及古代文明的遗迹。',
    image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.k1tRYHLjA0cDir1EBuOWqQHaFj?rs=1&pid=ImgDetMain',
    price: '¥ 12,999',
    rating: 4.9,
    region: 2, // 欧洲
    regionName: '欧洲',
    themes: [1, 2], // 海岛度假, 古城文化
    themeNames: ['海岛度假', '古城文化'],
    activities: ['伊亚日落', '蓝顶教堂', '红沙滩', '火山岛游览', '卡马利黑沙滩'],
    attractions: [
      {
        name: '伊亚村',
        description: '伊亚是圣托里尼岛上最著名的村庄，以其壮观的日落和蓝白相间的建筑而闻名。这里的小巷曲折蜿蜒，充满了精品店、艺术画廊和餐厅。',
        image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.s7ygNJ7EDYsFKkFstO8EDwHaEo?rs=1&pid=ImgDetMain'
      },
      {
        name: '蓝顶教堂',
        description: '蓝顶教堂是圣托里尼的标志性景点，这些教堂的蓝色圆顶与白色墙壁形成鲜明对比，成为了圣托里尼明信片上最常见的景象。',
        image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.8TgIx7ez7AhUWM-1KFSa4QHaLH?rs=1&pid=ImgDetMain'
      },
      {
        name: '红沙滩',
        description: '红沙滩是圣托里尼最独特的海滩之一，因其周围红色的火山岩而得名。这里的沙子呈红色，与蓝色的爱琴海形成了惊人的对比。',
        image: 'https://ts1.tc.mm.bing.net/th/id/R-C.e9666294a83488df2e3f94bad649329d?rik=Gn8Bf7lYXG1yOg&riu=http%3a%2f%2fimg.fotomen.cn%2f2016%2f08%2f34.jpg&ehk=aXvQptJfV6IgukkVbCYUyykutNDcPbIb4XZksMyeQFY%3d&risl=&pid=ImgRaw&r=0'
      },
      {
        name: '火山岛',
        description: '游客可以乘船前往圣托里尼的火山岛，体验温泉和硫磺泥浆浴。这个火山于大约3,600年前爆发，形成了现在的圣托里尼岛形状。',
        image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.ck8aJSQAZcDv_1DKjlyRDAHaE8?rs=1&pid=ImgDetMain'
      },
      {
        name: '卡马利黑沙滩',
        description: '卡马利是圣托里尼最受欢迎的海滩之一，以其黑色火山沙而闻名。这里有众多的餐厅、酒吧和水上活动项目。',
        image: 'https://36dong.com/api/thumbImg/445x300?img=https://resource.badazhou.com/res/2015/05/22/558c8eaf67d2c2622646005904b49544.jpg'
      }
    ],
    bestTimeToVisit: '5月至10月',
    travelTips: [
      '避开7月至8月的旺季，可以享受更少的人群和更合理的价格',
      '岛上交通不便，建议租车或参加当地旅游团',
      '伊亚日落时非常拥挤，请提前找好观景位置',
      '岛上饮用水有限，记得随身携带瓶装水'
    ]
  },
  { 
    id: 3, 
    name: '东京', 
    description: '现代与传统交融的都市', 
    fullDescription: '东京是日本的首都，也是世界上最大的城市之一。这座城市融合了现代科技与传统文化，创造出独特的都市风貌。在东京，您可以体验到热闹的购物区、安静的神社庙宇、先进的电子产品以及精致的日本料理。从繁华的涩谷十字路口到庄严的明治神宫，东京提供了丰富多样的旅游体验。',
    image: 'https://img95.699pic.com/photo/50635/8283.jpg_wh860.jpg',
    price: '¥ 6,999',
    rating: 4.7,
    region: 1, // 亚洲
    regionName: '亚洲',
    themes: [2, 4, 5], // 古城文化, 美食之旅, 购物天堂
    themeNames: ['古城文化', '美食之旅', '购物天堂'],
    activities: ['东京塔', '浅草寺', '明治神宫', '涩谷十字路口', '秋叶原'],
    attractions: [
      {
        name: '东京塔',
        description: '东京塔高333米，是东京的地标之一。游客可以登上观景台，欣赏东京360度的壮观景色。塔内还设有餐厅、商店和东京塔水族馆。',
        image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.d-pqgoYdNwLmZFgjHAGLYAHaE7?rs=1&pid=ImgDetMain'
      },
      {
        name: '浅草寺',
        description: '浅草寺是东京最古老的寺庙，始建于628年。这里的雷门以其巨大的红色灯笼而闻名，是日本最具代表性的景点之一。',
        image: 'https://ts1.tc.mm.bing.net/th/id/R-C.fd8d43711f16460f9e00c89964180caa?rik=juau2WrheUIK%2bA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50061%2f1522.jpg_wh860.jpg&ehk=aR8x5nUrgB648AXLCwDouxVLI73EaBHdKSONSRZX9DA%3d&risl=&pid=ImgRaw&r=0'
      },
      {
        name: '明治神宫',
        description: '明治神宫是供奉明治天皇和昭宪皇后的神社，建于1920年。神宫周围是一片宁静的森林，是都市中难得的自然避风港。',
        image: 'https://www.japan-travel.cn/assets_c/2020/01/Tokyo2331_5-thumb-1200x630-8187.jpg'
      },
      {
        name: '涩谷十字路口',
        description: '涩谷十字路口是世界上最繁忙的十字路口之一，每次信号灯变化时，多达3000人同时过马路。这里也是年轻人文化和时尚的中心。',
        image: 'https://bpic.588ku.com/back_origin_min_pic/23/06/12/fa1adf2e4a52de37e0ea06a04218e3de.jpg!/fw/750/quality/99/unsharp/true/compress/true'
      },
      {
        name: '秋叶原',
        description: '秋叶原是世界著名的电子产品和动漫中心，街道两旁满是电器店、游戏中心、动漫周边店和女仆咖啡厅。',
        image: 'https://img1.qunarzz.com/travel/d5/1712/56/8106493069586bb5.jpg'
      }
    ],
    bestTimeToVisit: '3月至5月（樱花季）或10月至11月（红叶季）',
    travelTips: [
      '购买东京地铁通票可以节省交通费用',
      '大多数景点周一闭馆，规划行程时请注意',
      '提前下载翻译应用，因为很多地方英语不通行',
      '在日本要遵守当地礼仪，如排队、不在公共场所大声喧哗等'
    ]
  },
  // 其他目的地数据...
];

// 获取目的地详情
onMounted(() => {
  loading.value = true;
  try {
    // 模拟API请求
    setTimeout(() => {
      const found = destinations.find(d => d.id === destinationId.value);
      if (found) {
        destination.value = found;
        loading.value = false;
      } else {
        error.value = true;
        loading.value = false;
      }
    }, 500);
  } catch (err) {
    error.value = true;
    loading.value = false;
  }
});

// 返回列表页
const goBack = () => {
  router.push('/destination');
};
</script>

<template>
  <div class="destination-detail-page">
    <Header />
    
    <div v-if="loading" class="loading">
      <div class="spinner"></div>
      <p>正在加载目的地信息...</p>
    </div>
    
    <div v-else-if="error" class="error-container">
      <h2>很抱歉，目的地信息加载失败</h2>
      <p>请稍后再试或返回目的地列表</p>
      <button @click="goBack" class="back-btn">返回目的地列表</button>
    </div>
    
    <template v-else-if="destination">
      <!-- 目的地头部信息 -->
      <div class="destination-header" :style="{backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${destination.image})`}">
        <div class="container">
          <div class="header-content">
            <h1>{{ destination.name }}</h1>
            <div class="destination-meta">
              <div class="rating">
                <span class="star">★</span>
                <span>{{ destination.rating }}</span>
              </div>
              <div class="region">{{ destination.regionName }}</div>
              <div class="themes">
                <span v-for="(theme, index) in destination.themeNames" :key="index" class="theme-tag">
                  {{ theme }}
                </span>
              </div>
            </div>
            <p class="description">{{ destination.description }}</p>
            <div class="price-tag">起价 {{ destination.price }}</div>
          </div>
        </div>
      </div>
      
      <div class="container">
        <!-- 返回按钮 -->
        <div class="back-section">
          <button @click="goBack" class="back-btn">
            <span class="back-arrow">←</span> 返回目的地列表
          </button>
        </div>
        
        <!-- 目的地详细描述 -->
        <div class="detail-section">
          <div class="section-title">
            <h2>目的地介绍</h2>
          </div>
          <div class="content-wrapper">
            <p class="full-description">{{ destination.fullDescription }}</p>
          </div>
        </div>
        
        <!-- 景点列表 -->
        <div class="attractions-section">
          <div class="section-title">
            <h2>热门景点</h2>
          </div>
          <div class="attractions-grid">
            <div v-for="(attraction, index) in destination.attractions" :key="index" class="attraction-card">
              <div class="attraction-image">
                <img :src="attraction.image" :alt="attraction.name" />
              </div>
              <div class="attraction-content">
                <h3>{{ attraction.name }}</h3>
                <p>{{ attraction.description }}</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 旅行信息 -->
        <div class="travel-info-section">
          <div class="section-title">
            <h2>旅行指南</h2>
          </div>
          <div class="travel-info-grid">
            <div class="travel-info-card">
              <h3>最佳旅行时间</h3>
              <p>{{ destination.bestTimeToVisit }}</p>
            </div>
            <div class="travel-info-card">
              <h3>旅行小贴士</h3>
              <ul>
                <li v-for="(tip, index) in destination.travelTips" :key="index">
                  {{ tip }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <Footer />
  </div>
</template>

<style scoped>
.destination-detail-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  color: #555;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 102, 204, 0.1);
  border-left-color: #0066cc;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-container {
  text-align: center;
  padding: 50px 20px;
}

.destination-header {
  background-size: cover;
  background-position: center;
  padding: 120px 0 60px;
  color: white;
  position: relative;
}

.header-content {
  max-width: 800px;
}

.header-content h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.destination-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.rating, .region {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
}

.star {
  color: #ffcc00;
}

.theme-tag {
  background-color: rgba(0, 102, 204, 0.7);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.description {
  font-size: 1.2rem;
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  max-width: 700px;
}

.price-tag {
  display: inline-block;
  background-color: #0066cc;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1.2rem;
}

.back-section {
  margin: 30px 0;
}

.back-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: #0066cc;
  font-size: 16px;
  cursor: pointer;
  padding: 5px 0;
}

.back-arrow {
  margin-right: 5px;
  font-size: 20px;
}

.section-title {
  margin-bottom: 30px;
  position: relative;
}

.section-title h2 {
  font-size: 1.8rem;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 2px solid #0066cc;
  display: inline-block;
}

.content-wrapper {
  margin-bottom: 50px;
}

.full-description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #444;
}

.attractions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.attraction-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s, box-shadow 0.3s;
}

.attraction-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.attraction-image {
  height: 200px;
}

.attraction-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attraction-content {
  padding: 20px;
}

.attraction-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.attraction-content p {
  color: #666;
  line-height: 1.5;
}

.travel-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 50px;
}

.travel-info-card {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 30px;
}

.travel-info-card h3 {
  color: #0066cc;
  margin-bottom: 15px;
  font-size: 18px;
}

.travel-info-card ul {
  padding-left: 20px;
}

.travel-info-card ul li {
  margin-bottom: 10px;
  color: #555;
}

/* 适配移动端 */
@media (max-width: 768px) {
  .header-content h1 {
    font-size: 2rem;
  }
  
  .description {
    font-size: 1rem;
  }
  
  .attractions-grid {
    grid-template-columns: 1fr;
  }
  
  .travel-info-grid {
    grid-template-columns: 1fr;
  }
}
</style> 